---
title: Skeleton
description: A placeholder UI component that improves perceived performance by mimicking the final layout while content loads dynamically.
order: 7
published: true
---

## Basic

Skeleton is a placeholder component that displays a loading state while your content loads. It's a great way to keep your layout looking fresh and prevent users from getting stuck on a blank page.

<How toUse="statuses/skeleton/skeleton-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/skeleton
```

## Manual installation
<SourceCode toShow='skeleton'/>

## Anatomy
```
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardAction } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

<Card className="p-4">
  <div className="flex gap-2">
    <Skeleton className="size-8" />
    <div className="space-y-1">
      <Skeleton className="h-4 w-56" />
      <Skeleton className="h-4 w-16" />
      <Skeleton className="h-4 w-24" />
      <Skeleton className="h-4 w-32" />
    </div>
  </div>
</Card>
```

## Soft
The `soft` prop makes the skeleton slightly darker. By default, it is set to `false`.
<How toUse="statuses/skeleton/skeleton-soft-demo" />

## Shape
Sometimes, you may need a skeleton with a specific shape. For example, if you want all skeletons to be circular, you can simply add `rounded-full` to the skeleton component. This example demonstrates how to achieve that by styling the skeleton from its parent.
<How toUse="statuses/skeleton/skeleton-shape-demo" />
